<template>
  <div class="application-container">
    <div class="wraper">
      <div class="page-logo">
        <img class="extend" src="http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/future.png" alt="" />
      </div>
      <div class="title">
        <div class="line line-first flex-container">
          <div class="btn-dot"></div>
          <div class="des">选题申请</div>
        </div>
        <div class="line line-sub">Column dynamics</div>
      </div>
      <div class="wraper">
    
        <div class="form-container">
          <div class="flex-container input-wraper">
            
          </div>
          <div class="sub-input flex-container">
            <div class="flex-container-distance">
              <div class="form-item input-wraper">
                <process-input title="公司名称" v-model="formData['company']"></process-input>
              </div>
              <div class="form-item input-wraper">
                <process-input title="所属行业" v-model="formData['profession']"></process-input>
              </div>
              <div class="form-item input-wraper">
                <process-input title="申请人" v-model="formData['name']"></process-input>
              </div>
              <div class="form-item input-wraper">
                <process-input title="申请人职务" v-model="formData['position']"></process-input>
              </div>
              <div class="form-item input-wraper">
                <process-input title="申请人联系电话" v-model="formData['phone']"></process-input>
              </div>
            </div>
            <div class='yyzz'>
              <process-upload @change="onchange" title="上传营业执照"></process-upload>
      <!--         <div class="back-img" v-else>
                <img class="extend" :src="imgUrl" alt="">
              </div> -->
               <br>
               <div class="btn-wraper">
                <base-button class="submit-btn" @click="submit(clickflag)" >提交</base-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import processInput from "@/components/processInput.vue";
import processUpload from '@/components/processUpload.vue';
import baseButton from '@/components/baseButton.vue'

import putApplication from '@/service/application/index'
export default {
  name: "application",
  data() {
    return {
      formData:{
        company:'',
        profession:'',
        position:'',
        name:'',
        phone:'',
        photo:''
      },
      imgUrl:'',
      clickflag: true
    };
  },
  methods:{
    onchange(obj){
      this.formData['photo'] = obj.file
      this.imgUrl = window.URL.createObjectURL(obj.file)
    },
    async submit(){
      // debugger
      if(!this.clickflag) return
      document.querySelector('.submit-btn').style.cssText='background:#ccc;color:#eee'
      this.clickflag = false
      console.log(this.clickflag)
      let arr = Object.keys(this.formData)
      let isWhite = false
      let map = {
        company:'公司名称',
        profession:'所属行业',
        position:'申请人职务',
        name:'申请人',
        phone:'申请人电话',
        photo:'营业执照'
      }
      let currentWhite = ''
      for(var i=0; i<arr.length; i++){
        if(!this.formData[arr[i]]){
          isWhite = true
          currentWhite = arr[i]
          break
        }
      }
      if(isWhite){
        this.$message.error(`提交失败,请完善${map[currentWhite]}`);//获取当前弹出的message容器
        var el=document.querySelector('.el-message');

        if(el) {
          el.style.cssText=' top:40%;background:#000000;opacity:0.6;border-radius:6px;width:50px;min-width:250px;'
          document.querySelector('.el-message__content').style.cssText='color:white'
          document.querySelector('.el-message__icon').style.cssText='color:white'
        }
        setTimeout(() => {
          this.clickflag = true
           document.querySelector('.submit-btn').style.cssText='background:#B8262C;color:#fff'
        }, 4000);
        
        return
      }
      let formData = new FormData()
      Object.keys(this.formData).forEach(item=>{
        formData.append(item,this.formData[item])
      })
      let res = await putApplication(formData)
      if(res.errmsg === "succ" && res.errno === 0){
        this.$message.success("恭喜你，提交成功")
      }
    }
  },
  components: {
    processInput,
    processUpload,
    baseButton
  },
};
</script>

<style lang="less" scoped>
.triangle-right {
  margin-left: 8px;
  width: 0;
  height: 0;
  border-left: 5px solid #333333;
  // border-right: 5px solid #333333;
  border-bottom: 9px solid transparent;
  border-top: 9px solid transparent;
}
.application-container {
  flex: 1 0 auto;
  background: url("http://cdn-ali-img-shdiy.shanhutech.cn/wlsm/assets/bg-application.png");
  background-size: cover;
  background-repeat: no-repeat;
}
.form-container {
  .form-item {
    width: 614px;
  }
  .input-wraper{
    margin: 25px 0;
    justify-content: space-between;
  }
  .flex-container-distance {
    margin-top: -50px;
  }
  .sub-input{
    justify-content: space-between;
  }
  .back-img{
    width: 200px;
    height:200px
  }
}
.wraper {
  width: 1300px;
  margin: 0 auto;
  .page-logo {
    width: 961px;
    height: 51px;
    margin: 0px auto;
    padding: 38px 0;
  }
  .title {
    // min-width: 200px;
    text-align: center;
    margin: 0 auto;
    .line {
      justify-content: center;
      // min-width: 200px;
    }
    .btn-dot {
      width: 25px;
      height: 25px;
      margin-right: 10px;
      background: #b8262c;
    }
    .des {
      font-size: 30px;
      font-family: Alibaba PuHuiTi;
      font-weight: 400;
      color: #333333;
    }
    .line-sub {
      font-size: 20px;
      // text-align: left;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #6b6b6b;
    }
  }
  .wraper {
    width: 1300px;
    margin: 0 auto;
    .application-title {
      font-size: 30px;
      font-family: Alibaba PuHuiTi;
      font-weight: 500;
      color: #333333;
    }
  }
}
.btn-wraper{
  padding: 22px 0;
  position: relative;
  height: 46px;
  .submit-btn{
    position: absolute;
    right: 0;
  }
}
.flex-container {
  display: flex;
  align-items: center;
  .yyzz{
    
  }
}
.extend {
  width: 100%;
  height: 100%;
  display: block;
}

</style>